<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		/* 分页--start */
		ul.pagination {
			display: inline-block;
			padding: 0;
			margin: 0;
		}

		ul.pagination li {
			display: inline;
		}

		ul.pagination li a {
			color: black;
			float: left;
			padding: 8px 16px;
			text-decoration: none;
			/* transition: background-color .3s; */
			border: 1px solid #ddd;
			margin: 0 4px;
		}

		ul.pagination li a.active {
			background-color: #4CAF50;
			color: white;
			border: 1px solid #4CAF50;
		}

		ul.pagination li a:hover:not(.active) {
			background-color: #ddd;
		}

		/* 分页--end */
		
		/* 垂直导航页--start */


		ul.demo-vertical {
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 100%;
			background-color: #f1f1f1;
			line-height: 150%;
		}

		ul.demo-vertical li a {
			display: block; //块状
			color: #000;
			padding: 8px 0 8px 16px;
			margin: 0;
			text-decoration: none;
			border: 0px;
		}


		ul.demo-vertical a.active {
			background-color: #008CBA;
			color: white;
		}

		ul.demo-vertical li a:hover:not(.active) {
			background-color: #555;
			color: #fff;
		}

		.demo-vertical a:link,
		.demo-vertical a:visited {
			text-decoration: none;
			color: teal;
			background: transparent;
			/*  border-bottom: 1px solid #900b09; */
			/*底部有边框*/
		}

		/* 垂直导航页--end */

		/* 水平导航页-start */

		ul.demo-horizontal {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #333;
		}

		ul.demo-horizontal li {
			float: left;
			margin: 0;
		}

		ul.demo-horizontal li a {
			display: inline-block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			border: 0;
		}

		ul.demo-horizontal li a:hover:not(.active) {
			background-color: #000;
		}

		ul.demo-horizontal li a.active {
			background-color: #008CBA;
		}

		ul.divider li {
			float: left;
			border-right: 1px solid #bbb;
		}

		ul.divider li:last-child {
			border-right: none;
		}

		/* 水平导航页-end */
	</style>
	<body>

		<h2>垂直导航栏</h2>
		<ul class="demo-vertical">
			<li><a class="active" href="javascript:void(0)">Home</a></li>
			<li><a href="javascript:void(0)">News</a></li>
			<li><a href="javascript:void(0)">Contact</a></li>
			<li><a href="javascript:void(0)">About</a></li>
		</ul>

		<h2>水平导航栏</h2>

		<ul class="demo-horizontal" style="margin-top: 15px;">
			<li><a class="active" href="javascript:void(0)">Home</a></li>
			<li><a href="javascript:void(0)">News</a></li>
			<li><a href="javascript:void(0)">Contact</a></li>
			<li class="rightli" style="float:right"><a href="javascript:void(0)">About</a></li>
		</ul>

		<h2>分页间隔</h2>
		<ul class="pagination">
			<li><a href="#">«</a></li>
			<li><a href="#">1</a></li>
			<li><a class="active" href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">»</a></li>
		</ul>

		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

		<script>
			$(".pagination li").click(function(even) {
				//console.log($(this).text());
				$(".pagination li a.active").removeClass("active");
				$(this).find("a").addClass("active");
			});
		</script>
	</body>
</html>
